{{ title = tree.name + " " + tree.version }}
{{include "../layouts/header.view.html"}}

<div id="page-content">
  <div class="container">

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{routeUrl("phylogenies_index",{})}}">Phylogenies</a></li>
        <li class="breadcrumb-item" aria-current="page"><a href="{{routeUrl("phylogenies_show",{phylotree: tree.getIdWithVersion()})}}">{{tree.name}} {{tree.version}}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{cluster.label}}</li>
      </ol>
    </nav>

    <h1>Cluster {{cluster.label}}</h1>

    {{if cluster.hasFrequencies()}}
    <h4>Population Frequencies  <a target="_blank" href="https://haplogrep.readthedocs.io/en/latest/annotations/#clusters-and-population-frequencies">  <i class="fas fa-question-circle"></i></a></h4>
    <div style="margin: 20px;">
      <div class="progress">
        {{frequencies = cluster.getFrequencies()}}
        {{for population in tree.getPopulations()}}
        {{if frequencies.get(population.getId()) != null}}
        <div class="progress-bar" style="width:{{toNumber(frequencies.get(population.getId())) * 100.0}}%; background-color: {{population.getColor()}}" title="{{population.getLabel()}} ({{toNumber(frequencies.get(population.getId())) * 100.0}}%)">
        </div>
        {{end}}
        {{end}}
      </div>
      <div style="margin-top: 10px;">
      {{for population in tree.getPopulations()}}
        <small>
          <span style="background-color: {{population.getColor()}}">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;{{population.getLabel()}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </small>
      {{end}}
      </div>
    </div>
    {{end}}

    <h4>Phylogenetic Tree</h4>
    <div id="graph" style="width: 100%; height: 552px; border: 1px; border-style: solid;">
    </div>
    <br><br>

    <h4>Included Haplogroups</h4>
    <p>This cluster includes the following <b> {{clades.size()}} haplogroups</b>:</p>
    <table class="table table-sm table-hover">
      <thead>
        <th>Haplogroup</th>
      </thead>
      <tbody>
      {{for clade in clades}}
      <tr class="clickable-tr" data-href="{{routeUrl("clades_show", {phylotree:tree.getIdWithVersion(), clade:clade.toString()})}}">
        <td class="">
          <span class="badge badge-primary">{{clade}}</span>
        </td>
      </tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>

<script>
{{include "show.view.js"}}

</script>

{{include "../layouts/footer.view.html"}}
